<template>
    <div id="container">

    </div>
</template>
<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted, onUnmounted, defineEmits, defineProps } from 'vue';
let map = null;
let markerPosition = null;
const props = defineProps({
    center: Array,
});



const createMarker = (position) => {
    // 定义一个图标
    const icon = new AMap.Icon({
        size: new AMap.Size(40, 50), // 图标尺寸
        image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", // 图标的取图地址
        imageSize: new AMap.Size(30, 30), // 根据所设置的大小拉伸或压缩图片
    });
    return new AMap.Marker({
        position, // 标记的位置
        title: '这是一个标记', // 鼠标悬停时显示的文本
        icon: icon, // 使用上面定义的图标
        offset: new AMap.Pixel(-13, -30), // 设置图标的偏移量
    });
}

// 使用 defineEmits 定义将要发出的事件
const emit = defineEmits(['changeMapForm','clickMapForm']);
const setMap = (map) => {
    

    // 创建一个 Marker 实例
    let marker = createMarker(props.center || [109.736, 18.7478]);
    marker.setMap(map);
    //  添加鼠标点击事件监听器
    map.on('mousemove', function (e) {
        emit('changeMapForm', { Lat: e.lnglat.getLat(), Lng: e.lnglat.getLng() });
    });
    //  添加鼠标点击事件监听器
    map.on('click', function (e) {
        map.remove([marker])
        marker = createMarker([ e.lnglat.getLng() ,  e.lnglat.getLat()]);
        marker.setMap(map);
        emit('clickMapForm', { Lat: e.lnglat.getLat(), Lng: e.lnglat.getLng() });
    });
}

onMounted(() => {
    map?.destroy();
    AMapLoader.load({
        key: import.meta.env.VITE_APP_MAP_KEY,
        version: "2.0",
        plugins: [],
    }).then((AMap) => {
        map = new AMap.Map("container", {
            zoom: 11, // 初始化地图级别
            center: props.center || [109.736, 18.7478],
        });

        setMap(map);
    }).catch((e) => {
        console.log(e);
    });
});

onUnmounted(() => {
    map?.destroy();
});
</script>

<style>
#container {
    width: 100%;
    height: 100%;
}
</style>